<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border: solid 1px #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: solid 1px #ccc;
            height: 30px;
            width: 100px;
        }
    </style>
</head>

<body>
    <label for="">行：</label>
    <input type="text" name="" id="row">
    <label for="">列：</label>
    <input type="text" name="" id="col">
    <input type="button" value="生成表格" id="btn">
    <div id="form">
       
    </div>
</body>
<script>
    var btn = document.getElementById("btn");
    var row = document.getElementById("row");
    var col = document.getElementById("col");
    var form = document.getElementById("form");


    btn.onclick = function () {
        var table = document.createElement("table");
        var tbody = document.createElement("tbody"); 
        table.appendChild(tbody);

        for (var i = 0; i < row.value; i++) {
            var tr = document.createElement("tr");
            
            for (var j = 0; j <= Number(col.value); j++) {
                var td = document.createElement("td")
                if(j == Number(col.value)){
                    var button = document.createElement("button");
                    var btn_copy = document.createElement("input");
                    btn_copy.type = "button"
                    button.innerHTML = "删除"
                    btn_copy.value = "复制"
                    td.appendChild(button)
                    td.appendChild(btn_copy)
                }else{
                    td.innerHTML = "";

                }
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
        form.appendChild(table);
        // 删除行
        var button = document.querySelectorAll("#form button")
        button.forEach(function(val,idx,arr){
            button[idx].onclick = function(){
                (button[idx].parentElement.parentElement).remove();
            }
           
        });
        
        var btn_copy = document.querySelectorAll("#form input")
        btn_copy.forEach(function(val,idx,arr){
            btn_copy[idx].onclick = function(){
                var res = (btn_copy[idx].parentElement.parentElement).cloneNode(true)
                btn_copy[idx].parentElement.parentElement.parentElement.appendChild(res)
            }     
        })
        
    }
    
</script>

</html>